<template>
    <section class="inline-form">
        <!-- 基本信息 -->
        <section class="title">基本信息</section>
        <a-row type="flex" :gutter="16">
            <a-col :span="8">
                <a-form-item label="归属门店">
                    {{ baseCarData.storeName }}
                </a-form-item>
            </a-col>
            <a-col :span="8">
                <a-form-item label="归属服务商">
                    {{ baseCarData.vendorName }}
                </a-form-item>
            </a-col>
            <a-col :span="8">
                <a-form-item v-if="isCarManage" label="车辆车型">
                    {{ baseCarData | getVehicleTypeName }}
                </a-form-item>
                <a-form-item v-else label="车辆车型">
                    {{ carData.vehicleTypeDesc || oldCarData.vehicleTypeDesc }}
                </a-form-item>
            </a-col>
            <a-col :span="8">
                <a-form-item label="车辆颜色">
                    <template v-if="editColor">
                        <a-select
                            v-model="carData.color"
                            style="width: 100px"
                            placeholder="请选择车辆颜色">
                            <a-select-option v-for="item in vehicleColorTypeEnums"
                                             :key="item.value"
                                             :value="item.value">{{ item.name }}
                            </a-select-option>
                        </a-select>
                    </template>
                    <template v-else>
                        {{ $utils.getEnumName(vehicleColorTypeEnums, carData.color) }}
                    </template>

                </a-form-item>
            </a-col>
          <!--  <a-col v-if="vehicleConfigNames&&!isCarManage" :span="8">
                <a-form-item label="车上配置">
                    {{ vehicleConfigNames }}
                </a-form-item>
            </a-col> -->
            <a-col :span="8">
                <a-form-item label="当前里程">
                    {{ carData.currentMileage }} 公里
                </a-form-item>
            </a-col>
			<a-col :span="8">
			    <a-form-item label="是否公司车辆">
			      <span v-if="carData.ownerType==1">是</span>
				   <span v-if="carData.ownerType==2">否</span>
			    </a-form-item>
			</a-col>
           <!-- <a-col :span="24" v-if="isCarManage">
                <a-form-item label="车上配置">
                    <a-checkbox-group v-model="vehicleConfig" @change="editVehiceConfig">
                        <a-checkbox v-for="item in vehicleConfigEnums" :key="item.value" :value="item.value">
                            {{ item.name }}
                        </a-checkbox>
                    </a-checkbox-group>
                </a-form-item>
            </a-col> -->
            <a-col :span="24">
                <a-row type="flex" :gutter="16">
                    <a-col :span="8">
                        <a-form-item class="block" label="行驶证件">
                            <PreviewImage v-if="carData.driveLicenceImg" class="mt-12"
                                          v-model="carData.driveLicenceImg.split(',')"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="16">
                        <a-form :form="drivingPermit">
                            <a-row :gutter="16">
                                <a-col :span="12">
                                    <a-form-item label="车架号">
                                        <a-input
                                            v-decorator="['frameNum', {rules: [{required: true, message: '请输入车架号'}]}]"
                                            placeholder="请输入车架号"/>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item label="车牌号">
                                        <a-input
                                            :value="carData.vehicleLicenceNum"
                                            v-decorator="['vehicleLicenceNum', {rules: [{required: true, message: '请输入车牌号'}]}]"
                                            placeholder="请输入车牌号"/>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item label="发动机号">
                                        <a-input
                                            v-decorator="['engineNum', {rules: [{required: true, message: '请输入发动机号'}]}]"
                                            placeholder="请输入发动机号"/>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item label="注册日期">
                                        <a-date-picker
                                            v-decorator="['drivingRegisteredDate', {rules: [{required: true, message: '请选择注册日期'}]}]"
                                            placeholder="请选择注册日期"/>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item label="使用性质">
                                        <a-input v-decorator="['useNature']" placeholder="请输入使用性质"/>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item label="所有人">
                                        <a-input v-decorator="['owner']" placeholder="请输入所有人"/>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-form>
                    </a-col>
                </a-row>
            </a-col>
        </a-row>
        <a-divider class="mt-0 mb-24"/>
        <!-- 保险信息 -->
        <section class="title">商业险保单</section>
        <a-row type="flex" :gutter="16">
            <a-col :span="8">
                <PreviewImage
                    class="mt-12"
                    v-if="carData.businessInsuranceImg"
                    v-model="carData.businessInsuranceImg.split(',')"
                />
            </a-col>
            <a-col :span="16">
                <a-form :form="insuranceForm">
                    <a-row type="flex" :gutter="16">
                        <a-col :span="12">
                            <a-form-item label="第三者险额度">
                                <a-select v-decorator="['insuranceAmount',
                                {rules: [{required: true, message: '请选择第三者险额度'}]}]"
                                          placeholder="请选择第三者险额度">
                                    <a-select-option v-for="item in insuranceAmountEnums"
                                                     :key="item.value"
                                                     :value="item.value">{{ item.label }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="保险到期日期">
                                <a-date-picker
                                    v-model="carData.insuranceExpireDate"
                                    placeholder="请选择保险到期日期"
                                    :disabled="isEdit"
                                    v-decorator="['insuranceExpireDate', {rules: [{required: true, message: '请选择保险到期日期'}]}]"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="车损保险起赔额">
                                <a-input
                                    v-model="carData.minCompensationFee"
                                    :disabled="isEdit"
                                    :min="0"
                                    :max="100000"
                                    placeholder="请输入车损保险起赔额"
                                    v-decorator="['minCompensationFee', {rules: [{required: true, message: '请输入车损保险起赔额'}]}]"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="商业保险公司">
                                <a-input placeholder="请输入商业保险公司"
                                         :disabled="isEdit"
                                         v-decorator="['insuranceCompany']"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="保险保单号">
                                <a-input placeholder="请输入商业保险单号"
                                         :disabled="isEdit"
                                         v-decorator="['insurancePolicyNo']"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="投保使用证件号">
                                <a-input v-model="carData.insuranceInfoCertificateNo"
                                         :disabled="isEdit"
                                         placeholder="请输入投保使用证件号"
                                         v-decorator="['insuranceInfoCertificateNo']"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </a-col>
        </a-row>
        <section class="title">交强险保单</section>
        <a-row type="flex" :gutter="16">
            <a-col :span="8">
                <PreviewImage
                    class="mt-12"
                    v-if="carData.compulsoryInsuranceImg"
                    v-model="carData.compulsoryInsuranceImg.split(',')"
                />
            </a-col>
            <a-col :span="16">
                <a-form :form="compulsoryInsuranceForm">
                    <a-row type="flex" :gutter="16">
                        <a-col :span="12">
                            <a-form-item label="保险到期日期">
                                <a-date-picker
                                    v-model="carData.clivtaExpireDate"
                                    placeholder="请选择保险到期日期"
                                    :disabled="isEdit"
                                    v-decorator="['clivtaExpireDate', {rules: [{required: true, message: '请选择保险到期日期'}]}]"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="保险公司名称">
                                <a-input placeholder="请输入保险公司名称"
                                         :disabled="isEdit"
                                         v-decorator="['compulsoryInsuranceCompany']"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="保险单号">
                                <a-input :disabled="isEdit"
                                         placeholder="请输入保险单号"
                                         v-decorator="['compulsoryInsurancePolicyNo']"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="投保使用证件号">
                                <a-input :disabled="isEdit"
                                         placeholder="请输入投保使用证件号"
                                         v-decorator="['compulsoryInsuranceCertificateNo']"
                                />
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </a-col>
        </a-row>
		<section class="title">年检证</section>
		<a-row type="flex" :gutter="16">
		    <a-col :span="8">
		        <PreviewImage
		            class="mt-12"
		            v-if="carData.annualInspectionImg"
		            v-model="carData.annualInspectionImg.split(',')"
		        />
		    </a-col>
		    <a-col :span="16">
		        <a-form :form="inspectAnnually">
		            <a-row type="flex" :gutter="16">
		                <a-col :span="12">
		                    <a-form-item label="有效期至">
		                        <a-date-picker
		                            v-model="carData.annualInspectionExpireDate"
		                            placeholder="请选择有效日期"
		                            :disabled="isEdit"
		                            v-decorator="['annualInspectionExpireDate', {rules: [{required: true, message: '请选择保险到期日期'}]}]"
		                        />
		                    </a-form-item>
		                </a-col>
		             
		            </a-row>
		        </a-form>
		    </a-col>
		</a-row>
    </section>
</template>
<script>
import {getVehicleTypeName} from "@/utils/filter";

const insuranceAmountEnums = [
    {value: 50000, label: '5万'},
    {value: 100000, label: '10万'},
    {value: 200000, label: '20万'},
    {value: 300000, label: '30万'},
    {value: 500000, label: '50万'},
    {value: 1000000, label: '100万'},
    {value: 2000000, label: '200万'},
    {value: 3000000, label: '300万'},
    {value: 5000000, label: '500万'},
    {value: 10000000, label: '1000万'}]

// const colorEnums = [
//     {value: 0, label: '未知'},
//     {value: 1, label: '白色'},
//     {value: 2, label: '黑色'},
//     {value: 3, label: '红色'},
//     {value: 4, label: '蓝色'},
//     {value: 5, label: '黄色'},
//     {value: 6, label: '紫色'},
//     {value: 7, label: '银色'},
//     {value: 8, label: '灰色'},
//     {value: 9, label: '橙色'},
//     {value: 10, label: '绿色'},
//     {value: 11, label: '藏青'},
//     {value: 12, label: '其他颜色'},
// ]
export default {
    name: 'TravelInfo',
    props: {
        carData: {
            type: Object,
            required: true,
        },
        isEdit: {
            type: Boolean,
            default: false,
        },
        oldCarData: {
            type: Object,
            default: () => ({}),
        },
        baseCarData: {
            type: Object,
            default: () => ({}),
        },
        editColor: {
            type: Boolean,
            default: false,
        },
        isCarManage: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            transmissionTypeEnums: [],
            vehicleSourceEnums: [],
            vehicleColorTypeEnums: [],
            vehicleConfigEnums: [],
            // colorEnums: colorEnums,
            insuranceAmountEnums: insuranceAmountEnums,
			inspectAnnually:this.$form.createForm(this, {name: 'inspect_annually'}),
            //行驶证表单
            drivingPermit: this.$form.createForm(this, {name: 'drivingPermit'}),
            //保险表单
            insuranceForm: this.$form.createForm(this, {name: 'insurance_form'}),
            //交强险表单
            compulsoryInsuranceForm: this.$form.createForm(this, {name: 'compulsory_insurance_form'}),
            //配置
            vehicleConfig:''
        }
    },
    computed: {
        carDesc() {
            return this.$utils.getVehicleTypeName(this.carData)
        },
        // vehicleConfigNames() {
        //     if (!this.carData.vehicleConfigs) return
        //     if (this.isCarManage) return
        //     return this.vehicleConfigEnums
        //         .filter((item) =>
        //             this.carData.vehicleConfigs
        //                 .split(',')
        //                 .filter((e) => e)
        //                 .includes(`${item.value}`)
        //         )
        //         .map((e) => e.name)
        //         .join(',')
        // },
        liabilityInsuranceArr() {
            return [this.liabilityInsuranceDriver, this.liabilityInsurancePassenger]
        },
    },
    created() {
        // this._init()
    },
    mounted() {
        this._init()
    },
    methods: {
        async _init() {
            this.transmissionTypeEnums = await this.$utils.getDictList('TransmissionType')
            this.vehicleSourceEnums = await this.$utils.getDictList('VehicleSource')
            this.vehicleConfigEnums = await this.$utils.getDictList('VehicleConfig')
            this.vehicleColorTypeEnums = await this.$utils.getDictList('VehicleColorType')
            // console.log(`vehicleColorTypeEnums`, this.vehicleColorTypeEnums)
            // console.log(`this.carData.vehicleConfigs`, this.carData.vehicleConfigs)
            // console.log(`this.carData`, this.carData)
            // const vehicleConfig = Array.isArray(this.carData.vehicleConfigs) ?
            //     this.carData.vehicleConfigs :
            //     this.carData.vehicleConfigs.split(",")
            //     this.vehicleConfig = vehicleConfig.map(item => parseInt(item))
            this.setFormValue('drivingPermit')
            this.setFormValue('insuranceForm')
            this.setFormValue('compulsoryInsuranceForm')
			this.setFormValue('inspectAnnually')
        },
        setFormValue(type, value = this.carData) {
            this[type].setFieldsValue(value)
            if (type === 'insuranceForm') {
                this.insuranceForm.setFieldsValue(
                    {
                        insuranceAmount: value.insuranceAmount,
                    }
                )
            }
        },
        getFormDrivingPermit(type) {
            return new Promise((resolve, reject) => {
                this[type].validateFields((err, values) => {
                    if (err) {
                        reject(err)
                    } else {
                        resolve(values)
                    }
                })
            })
        },
        GetFormAllValue() {
            return [
                this.drivingPermit.getFieldsValue(),
                this.insuranceForm.getFieldsValue(),
                this.compulsoryInsuranceForm.getFieldsValue(),
				this.inspectAnnually.getFieldsValue()
            ]
        },
        GetFormAllValidate() {
            return Promise.all([
                this.getFormDrivingPermit('drivingPermit'),
                this.getFormDrivingPermit('insuranceForm'),
                this.getFormDrivingPermit('compulsoryInsuranceForm'),
					this.getFormDrivingPermit('inspectAnnually')
            ]).then(res => {
                console.log(res)
                return this.GetFormAllValue()
            }).catch(err => {
                console.log(`err`, err)
            })
        },
        editVehiceConfig(e) {
            this.$emit('change', e)
        },
    },
}
</script>
<style lang="less" scoped>
@import './info';

.title {
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: bold;
}

.block {
    display: block !important;

    /deep/ .ant-form-item-label {
        width: auto;
    }
}
</style>
